<template>
<div class="ui-modal" role="dialog" v-el:modal>
	<div>
		<div class="modal-dialog {{theme}}" v-el:widget>
			<div class="modal-content">
				<div v-el:modalvform>
					<div class="modal-header" v-if="title" v-el:widget-title>
						<button type="button" v-el:close class="close" data-dismiss="modal" aria-label="Close" @click="_resetBindDrag"><span aria-hidden="true">&times;</span></button>
						<h4 class="modal-title">{{title}}</h4>
					</div>
					<slot>
					</slot>
				</div>
			</div>
		</div>
	</div>
</div>
</template>

<style scoped>
.big {
	width: 850px;
	margin: auto;
}
.small_window{
	width: 450px;
	margin: auto;
}
</style>

<script>
export default {
	props: {
		title: {
			default: ""
		},
		theme: {
			default: ""
		}
	},
	methods: {
		_mousemove() {},
		_mouseup() {},
		_bindDrag() {
			let widget = this.$els.widget;
			let title_bar = this.$els.widgetTitle;
			let offset = null;
			if (window.getComputedStyle(widget).position === "static") {
				widget.style.position = "relative";
			}
			title_bar.addEventListener("mousedown", function(event) {
				var position = [event.pageX, event.pageY];
				var computed = window.getComputedStyle(widget);
				offset = [computed.left, computed.top].map(x => Number(x.slice(0, -2)) || 0);
				offset[0] -= position[0];
				offset[1] -= position[1];
			}, false);
			this._mousemove = function(event) {
				if (offset) {
					let position = [event.pageX, event.pageY];
					widget.style.left = offset[0] + position[0] + "px";
					widget.style.top = offset[1] + position[1] + "px";
				}
			};
			this._mouseup = () => offset = null;
			document.addEventListener("mousemove", this._mousemove, false);
			document.addEventListener("mouseup", this._mouseup, false);
		},
		_unbindDrag() {
			document.removeEventListener("mousemove", this._mousemove);
			document.removeEventListener("mouseup", this._mouseup);
		},
		_resetBindDrag() {
			this.$emit('close')
			this.$els.widget.style.left = 0 + "px"
			this.$els.widget.style.top = 0 + "px"
			$("label.error").remove()

		},
		init() {
			$(this.$els.modal).modal('show');
		},
		hide() {
			//$(this.$els.modal).modal('hide');
			$(this.$els.close).click();
		}
	},
	ready() {
		let self = this;
		$(this.$el).on('hidden.bs.modal', function() {
			$(this).removeData('bs.modal');
			let form = $(self.$els.modalvform).find("form")[0];
			if (form) {
				form.reset();
			}
			$(form).find("label.error").remove();
		});
		//弹出窗口可拖拽
		this._bindDrag()

	}
}
</script>
